<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>店铺信息</title>
		 
		<link rel="stylesheet" href="./css/reset.css">
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/shop.css">
		
		<link rel="stylesheet" href="./plugins/font-awesome-4.7.0/css/font-awesome.min.css">
			
		<script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script>
			
		<script type="text/javascript">
			
			function loadFood(typeId){
				$.ajax({
					type:"GET",
					url:"http://192.168.150.202:8080/Api/foods?typeId="+typeId,
					success:function(responseData){
						//清除
						$("div.list-item > ul > li").remove();
						//拼接
						for(var i=1;i<responseData.rows.length;i++){
							var food = responseData.rows[i];
						 
							var item = `<li>
								<div class="summary">
									<img src="img/product/sp0${i}.png"/>
									<div class="info">
									    <h3>${food.name}</h3>
									    <p>${food.material}</p>
									    <p>&yen;<span name="price">${food.price}</span></p>
									</div>
								</div>
							    
							   <div class="operation">
								   <p class="minus">-</p>
								   <input type="text" data-id="${food.id}" value="0" name="count"/>
								   <p class="plus">+</p>
							   </div>
							</li>`;
							$("div.list-item > ul").append($(item));
						}
					}
				})
			}
			
			
			function calPrice(){
				var $inputList = $("div.list-item > ul > li input[name='count']");
			     
				//TODO 判断
				
				var totalCount=0; 
				
				var totalPrice=0;
				for(var i=0;i<$inputList.length;i++){
					
					var $input = $($inputList[i]);
					var price =parseInt($input.closest("li").find("span[name='price']").text());
					totalCount = totalCount+parseInt($input.val());
					
					totalPrice = totalPrice + price*parseInt($input.val());
				}
				
				$("div.car span").text(totalCount);
				
				$("div.car div.summary p.price").text("¥"+totalPrice);
			}
			$(function(){
				$.ajax({
					type:"GET",
					url:"http://192.168.150.202:8080/Api/foodTypes",
					success:function(responseData){
						var $ul = $("div.list-type > ul");
						var types = responseData.rows;
						for(var i=0;i<types.length;i++){
							var item = types[i]; 
							$("<li data-id='"+item.id+"'>"+item.name+"</li>").appendTo($ul);
						}
						
						loadFood(-1);
					}
				});
				
				//对类别绑定监听
				$("div.list-type > ul").on("click","li",function(){
					var $it = $(this); 
					var typeId = $it.data("id");  //获取data-id属性的值
					 
					loadFood(typeId);
					
					//清除掉li的active,然后给它自己添加active
					$("div.list-type > ul >li").removeClass("active");
					$(this).addClass("active");
				});
			    
				//对加减绑定监听
				$("div.list-item > ul").on("click","p.minus,p.plus",function(){
					var $it = $(this);
					
					var $input = $it.siblings("input");
					
					var currentVal = parseInt($input.val());//整数
					if($it.hasClass("minus")){
						//-
						if(currentVal==0){
							return;
						}
						$input.val(currentVal-1);
					}else{
						//+
						$input.val(currentVal+1);
					}
					calPrice(); 
				});
				
				//结算
				$(".buy").on("click",function(){
					
					//判断是否有登录  ？
					var info = localStorage.getItem("info"); //removeItem
			
					if(info==null){
						window.location.href="http://127.0.0.1:8848/Canteen/login.html";
					}else{
						//发送ajx请求到servlet生产订单[BookServlet]-->支付界面
						
						//需要提交的数据
						    //会员的id
							//商品id[添加的数量>=1]和数量
							
						var $inputList = $("input[name='count']");
						
						var ids = [];
						var counts = [];
						
						for(var i=0;i<$inputList.length;i++){
							var count = $($inputList[i]).val();
							if(count>0){
								var foodId = $($inputList[i]).data("id");
								ids.push(foodId);
								counts.push(count);
							}
						}
						
						var idParam= "&foodId="+ids.join('&foodId=');
						var countParam= "&count="+ids.join('&count=');
						
						//TODO 
						var customerId = JSON.parse(localStorage.getItem("info")).id;
						
						$.ajax({
							type:"POST",
							url:"http://localhost/ApiServer/books",
							data:"customerId="+customerId+idParam+countParam,
							success:function(data){
								if(data.success){
									//去到支付界面 ??
								}else{
									alert(data.msg);
								}
							}
						})	 
					}
				});
			})
		</script>	
	</head>
	<body>
		<p class="title">商家信息</p>
		
		<div class="shop-info">
			<img src="img/b2.jpg"/>
			<h2>万家饺子（软件园E18店）</h2>
			<p>¥15起送 ¥3配送</p>
			<p>各种饺子炒菜</p>
		</div>
		
		<div class="list">
			<div class="list-type">
				<ul>
					<li data-id="-1" class="active">全部</li>
				</ul>
			</div>
			
			<div class="list-item">
				<ul>
				</ul>
			</div>
		</div>
		
		<div class="car">
			<div class="count">
				<i class="fa fa-shopping-cart"></i>
			    <span>0</span>
			</div>
			
			<div class="summary">
				<p class="price">¥0</p>
				<p class="note">另需配送费3元</p>
			</div>
			
			<div class="buy">
				去结算
			</div>

		</div>
		
		<div class="footer">
			<ul>
				<a href="index.html"><li><i class="fa fa-home"></i>首页</li></a>
				<a href="shop.html"><li><i class="fa fa-chrome"></i>店铺</li></a>
				<a href="order.html"><li><i class="fa fa-tasks"></i>订单</li></a>
				<a href="mine.html"><li><i class="fa fa-user-o"></i>我的</li></a>
			</ul>
		</div>
		
		
	</body>
	
</html>